<template>
    <div class="confirm page">
        <div class="con">
            <div class="items">
                <div v-for="(item,index) in signList" :key="item.sign.id">

                    <btn-slide-wrapper @btnClick="btnClick(item.sign.id,index)" style="margin-top: 10px">
                        <div class="item">
                            <div class="s-btn">
<!--                                <span v-show="item.selected" class="iconfont iconselected"></span>-->
                            </div>
                            <div class="info" @click="toEdit(item.sign.id)">
                                <div class="user">
                                    <span class="name">{{item.sign.userName}}</span>
                                    <span class="phone">{{item.sign.phone}}</span>
                                </div>
                                <div class="detail">
                                    <span class="txt">{{item.course.name}}</span>
                                </div>
                                <div class="time">
                                    {{parseTime(item.sign.time)}}
                                    <span v-if="index<2" :key="index" v-for="(sum,index) in  item.sum" style="color: red;margin-left: 10px">{{sum.name}}{{sum.number}}人</span>

                                </div>
                            </div>
                            <div style="color: red" v-if="item.sign.active&&item.sign.status==0" class="btn" @click="confirm(item.sign.id,index)">点击确认</div>
                            <div v-else class="btn" @click="showQrCode(item.card.code,item.sign)">{{statusOptions[item.sign.status]}}</div>
                        </div>
                    </btn-slide-wrapper>
                </div>


            </div>

<!--            <div class="add-btn" @click="toEdit()">-->
<!--                新增地址-->
<!--            </div>-->
        </div>
    </div>
</template>

<script>
    import btnSlideWrapper from '@/components/base/btn-slide-wrapper'
    import {listSign,confirm,deleteSign} from "../../api/course";
    import {parseTime} from "../../common/js/time";
    import * as Dialog from '@/dialog'
    export default {
        activated(){
            listSign().then(res=>{
                this.signList = res.data
            })
        },
        data() {
            return {
                signList: [],
                statusOptions:['预报名','已确认','已签到']

            }
        },

        methods: {
            showQrCode(code,sign) {
                if(sign.status!=1){
                    return
                }
                let courseId = sign.courseId
                this.$router.push({
                    path: '/code',
                    query: {code,courseId}
                })
            },
            parseTime(time){
              return parseTime(time)
            },
            btnClick(id,index) {
                deleteSign(id).then(res=>{
                    this.signList.splice(index,1);
                })
            },
            turn(path){
                this.$router.push(path)
            },
            confirm(signId,index){
                confirm(signId).then(res=>{
                    this.signList[index].sign = res.data
                    Dialog.showCorrect("操作成功!")
                })
            },
            toEdit(signId){
                this.$router.push({
                    path:'/course/sign',
                    query:{
                        signId
                    }
                })
            }
        },
        components: {
            btnSlideWrapper
        }
    }
</script>

<style scoped lang="stylus">
    .confirm
        z-index 2
        height 100%
        background url("~@/assets/cbg.png") no-repeat $page-bg
        background-size 100% auto
        .con
            padding-top 10px
            padding-bottom 35px
            .add-btn
                position fixed
                bottom 0
                left 0
                right 0
                height 35px
                background-color #F7895E
                color white
                font-weight 300
                font-size 12px
                line-height 12px
                text-align center
                line-height 35px
            .items
                padding 0 10px

                .item
                    white-space normal
                    /*margin-top 10px*/
                    padding 15px 0 15px
                    background-color white
                    /*border-radius 5px*/
                    display flex
                    box-shadow:0px 10px 8px 1px rgba(222,219,219,1);
                    align-items center

                    .s-btn
                        flex 0 0 24px
                        display flex
                        justify-content center
                        align-items center

                        .iconfont
                            color #F0C808
                            font-size 15px

                    .info
                        flex 1

                        .user
                            font-weight 300
                            font-size 0
                            .name
                                color #6F6F6F
                                font-size 14px
                                line-height 14px
                                margin-right 13px
                                font-weight 300
                            .phone
                                font-weight 300
                                line-height 12px
                                color #A1A1A1
                                font-size 12px
                        .detail
                            padding-right 48px
                            margin 7px 0
                            font-weight 300
                            font-size 0
                            .txt
                                color #4E3D07
                                font-size 14px
                        .time
                            font-size:10px;
                            font-family:PingFang SC;
                            font-weight:300;
                            color:rgba(161,161,161,1);
                    .btn
                        flex 0 0 80px
                        width 40px
                        height 40px
                        text-align center
                        line-height 40px
                        color #A9B1C0
                        font-size 12px
                        border-left 1Px solid #A9B1C0


</style>